<template>
    <div class="listPage">
      <!-- header -->
      <div class="search_header">
        <van-nav-bar
          title="商品列表"
          left-arrow
          @click-left="$router.go(-1)"
        />
      </div>
      <!-- search of list  -->
      <div class="list_search">
        <van-search
          :value="search || '搜索商品'"
          placeholder="请输入搜索关键词"
        />
        <van-icon name="apps-o" size="40" />
      </div>
      <!-- selection sort -->
      <div class="select_sort">
        <van-tabs @click="onSort">
          <van-tab title="综合"></van-tab>
          <van-tab title="销量"></van-tab>
          <van-tab>
            <template #title>
              <div class="price_sort">
                <p>价格</p>
                <div class="price_sort_icon">
                  <div style="height: 15px;">
                    <van-icon name="arrow-up" size="15" />
                  </div>
                  <div style="height: 15px;">
                    <van-icon name="arrow-down" size="15" />
                  </div>
                </div>
              </div>
            </template>
          </van-tab>
        </van-tabs>
      </div>
      <!-- list body -->
      <div v-if="goodsList.length" class="list_body">
        <goodsDetail v-for="item in goodsSort"
          :key="item.goods_id"
          :item="item">
        </goodsDetail>
      </div>
      <div v-else class="list_empty">
        <img src="@/assets/empty.png" alt="">
        <p>亲，暂无相关数据</p>
      </div>
    </div>
</template>

<script>
import { getList } from '@/api/search'
import goodsDetail from '@/components/goodsDetail.vue'

export default {
  name: 'ListIndex',
  components: {
    goodsDetail
  },
  data () {
    return {
      search: this.$route.query.search,
      page: 1,
      goodsList: [],
      goodsSort: []
    }
  },
  async created () {
    const { data: { list } } = await getList({
      goodsName: this.search,
      page: this.page
    })
    // console.log(list.data)
    this.goodsList = list.data
    // 浅拷贝：Object、Array、以及函数等属于引用数据类型
    // 引用数据类型名字存在栈内存，但是值存在堆内存中，
    // 栈内存会提供一个地址指向堆内存，赋值只是传递了指向堆地址（指针）
    this.goodsSort = Object.assign([], this.goodsList)
    console.log('22', this.goodsSort)
  },
  methods: {
    onSort (index) {
      if (index === 1) {
        this.goodsSort.sort(function (a, b) {
          return b.goods_sales - a.goods_sales
        })
        // console.log('22', this.goodsList)
      } else if (index === 0) {
        this.goodsSort = []
        console.log(this.goodsList, '22')
        this.goodsSort = Object.assign([], this.goodsList)
      }
    }
  }
}
</script>

<style scoped>
  .list_search{
    display: flex;
    justify-content: center; /*水平居中*/
    align-items: center; /*垂直居中*/
  }
  .van-search .van-cell{
    font-size: 25px;
    height: 40px;
    line-height: 40px;
  }
  ::v-deep .van-tab__text{
    font-size: 20px;
  }
  .price_sort{
    display: flex;
    align-items: center;
  }
  .price_sort_icon{
    height: 35px;
  }
  .list_empty{
    padding: 50px;
   text-align: center;
  }
</style>
